import 'bootstrap/dist/css/bootstrap.min.css';
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Radio, Pagination } from 'antd';
import HomeHeader from '../../components/HomeHeader/HomeHeader.js';
import HomeBody from '../../components/HomeBody/HomeBody.js';

export default function HomePage() {
  const { part, page } = useParams();
  const [neworhot, setNeworhot] = useState('new');
  const navigate = useNavigate();
  const [totalArticles, setTotalArticles] = useState(0);
  const fetchDataForPage = async (pageNumber) => {
    console.log(`Fetching data for page ${pageNumber}`);
  };

  useEffect(() => {
    fetchDataForPage(page);
  }, [part, page]);

  const handlePageChange = (pageNumber) => {
    navigate(`/home/${part}/${pageNumber}`);
  };

  return (
    <div>
      <HomeHeader />
      <HomeBody type={part} current={page} neworhot={neworhot} onTotalChange={setTotalArticles}/>
	  <div style={{ margin: '20px 0', textAlign: 'center' }}>
	    <Radio.Group
	      value={neworhot}
	      onChange={(e) => setNeworhot(e.target.value)}
	      buttonStyle="solid"
	    >
	      <Radio.Button value="new">最新</Radio.Button>
	      <Radio.Button value="hot">最热</Radio.Button>
	    </Radio.Group>
	  </div>
      <div style={{ margin: '20px 0', textAlign: 'center' }}>
        <Pagination
          current={parseInt(page, 10)}
          total={totalArticles}
          onChange={handlePageChange}
          showSizeChanger={false}
        />
      </div>
    </div>
  );
};
